<template>
	<div class="form">
		<h1>form</h1>
		<h2>indeterminate</h2>
		<p>{{cities}}</p>
		<p>{{checkedCities}}</p>
		<p>{{checkAll}}</p>
		<p>{{isIndeterminate}}</p>

		<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<br>

		<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
			<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
		</el-checkbox-group>




		<!-- <h2></h2>
		<div style="margin-top: 20px">
			<el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>
			<el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox>
		</div>

		<h2>Checkbox</h2>
		<p>{{checked}}</p>
		<el-checkbox v-model="checked">同意注册协议</el-checkbox>
		<h2>Radio</h2>
		<P>{{radio4}}</P>
		<el-radio-group v-model="radio4" size="mini" @change="r4">
			<el-radio-button label="上海"></el-radio-button>
			<el-radio-button label="北京"></el-radio-button>
			<el-radio-button label="广州"></el-radio-button>
			<el-radio-button label="深圳"></el-radio-button>
		</el-radio-group> -->
		<div class="demo-input-size">
			<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input1">
			</el-input>
			<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input2">
			</el-input>
			<el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input3">
			</el-input>
			<el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input4">
			</el-input>
		</div>
	</div>
</template>

<script>
	const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {
		name: 'Form',
		data() {
			return {
				radio4: '上海',
				checked: true,
				arr: ['复选框A', '复选框B'],
				checkAll: false,
				checkedCities: ['上海', '北京'],
				cities: cityOptions,
				isIndeterminate: true,
				input1: '',
				input2: '',
				input3: '',
				input4: ''



			}
		},
		methods: {
			r4(e) {
				console.log("选中是:" + e);
				console.log("最新结果:" + this.radio4);
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}
		}
	}
</script>


<style scoped>

</style>
